<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 200px;
        margin: 0 auto;
        border: 1px solid #000;
      }
      ul {
        width: 200px;
        display: flex;
        justify-content: space-between;
      }
      li {
        flex: 1;
        width: 50px;
        list-style-type: none;
      }
      .n {
        width: 200px;
        height: 200px;
        /* border: 1px solid #000; */
        background-color: rgb(187, 230, 32);
        display: none;
      }
      .color {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>标题一</li>
        <li>标题二</li>
        <li>标题三</li>
      </ul>
      <div class="n" style="display: block">1</div>
      <div class="n" style="background-color: springgreen">2</div>
      <div class="n" style="background-color: salmon">3</div>
    </div>










    
    <script>
      let li = document.querySelectorAll("li");
      let div = document.querySelectorAll(".n");

      //       for (let i = 0; i < li.length; i++) {
      //         li[i].onclick = function () {
      //           for (let i = 0; i < li.length; i++) {
      //             li[i].style.backgroundColor = "#fff";
      //             div[i].style.display = "none";
      //           }
      //           this.style.backgroundColor = "skyblue";
      //           div[i].style.display = "block";
      //           };
      // }
      let i = 0;
      li.forEach(function (item, index) {
        item.onclick = function () {
          //   console.log(item);
          //   console.log(index);
          // 清除上一个操作的类名
          li[i].classList.remove("color"); //当前li操作添加类名
          div[i].style.display = "none";
          //   console.log(li[i]);
          this.classList.add("color"); //保存操作完毕之后的下标
          div[index].style.display = "block";
          i = index;
        };
      });
    </script>
  </body>
</html>
